
  
  <template>
    <div class="project">
      <!-- 菜单栏 -->
      <div class="menu-bar">
        <!-- 左对齐的元素 -->
        <div class="left-buttons">
          <input v-model="currentProject.name" placeholder="Enter Project Name" />
          <button @click="saveProject">Save</button>
          <button @click="refreshProject">Refresh</button>
          <button @click="addNewAgentNode">Add New Agent Node</button>
          <button @click="addNewToolNode">Add New Tool Node</button>
          <button @click="addNewDataNode">Add New Data Node</button>
        </div>

        <!-- 右对齐的按钮 -->
        <button class="deploy-button" @click="deployAction" :disabled="deployButtonState.disable" >{{ deployButtonState.deployText }}</button>
      </div>
      <!-- 主体部分 -->
      <div class="content">
  
          <!-- 可折叠的inspector -->
          <div class="inspector" v-if="isInspectorVisible">
            <h3>Inspector</h3>
            <div v-if="selectedNode">
              <h4>Selected Node</h4>
              <p>{{ selectedNode.name }}</p>
              <p>{{ selectedNode.details }}</p>
            </div>
            <div v-else>
              <p>Select a node to see details</p>
            </div>
          </div>
        <!-- 其他主体部分，可以根据需求添加 -->
        <div class="editor">
          <!-- <FlowCanvas :initialData="()=>{return JSON.parse(currentProject.content)}" /> -->
          <FlowCanvas :id="currentProject.id"   :key="componentKey" />
        </div>
      </div>
    </div>
  </template>
  

  <script lang="ts">
  import { defineComponent, watch, ref, onMounted,computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { useProjectsStore } from '../stores/projectsStore'; // 替换为你store路径
  import FlowCanvas from './FlowCanvas.vue'; // 引入FlowCanvas组件
  import { initialEdges, initialNodes } from './data/initial-elements'
  import useServer from './ts/useServer';
  import { useUserStore } from '@/stores/userStore';
import { json } from 'stream/consumers';

  export default defineComponent({
    name: 'Project',
    components: {
      FlowCanvas,
    },
    props: {
      projectId: {
        type: String,
        required: true,
      },
    },
    setup(props) {
      
      const projectsStore = useProjectsStore();
      const currentProject =  ref(projectsStore.projects.find(p => p.id === props.projectId) || { id: '', name: '', content: {initialEdges:Object(), initialNodes:Object()} });
      
      function updateProjectName(){
        if (currentProject.value) {
          projectsStore.updateProjectName(props.projectId, currentProject.value.name);
        }
      };
      
      // 选择的节点
      const selectedNode = ref({id: '', name: '', details: ''});
      // 是否显示Inspector
      const isInspectorVisible = ref(true);
      const componentKey = ref(0);
      const refreshComponent = () => {
        componentKey.value += 1; // 改变 key 值以强制重新渲染
      };

      watch(() => props.projectId, (newProjectId, oldProjectId) => {
        const oldPorject = projectsStore.projects.find(p => p.id === oldProjectId);
        console.log('oldProject', oldProjectId)
        if (oldPorject) projectsStore.updateProjectContent(oldProjectId, oldPorject.content, true)

        const project = projectsStore.projects.find(p => p.id === newProjectId);
        if (project) {
          currentProject.value = project;
          console.log('currentProject.value',currentProject.value);
          refreshComponent();
        }
        else{
          currentProject.value = { id: newProjectId, name: 'New Project', content: {initialEdges, initialNodes} };
          projectsStore.projects.push(currentProject.value)
        }
      });

      const saveProject = () => {
        console.log(currentProject.value)
        projectsStore.updateProjectContent(currentProject.value.id, currentProject.value.content, true)
      };
      
      const refreshProject = () => {
        const project = projectsStore.projects.find(p => p.id === props.projectId);
        if (project) {
          currentProject.value = project;
        }
      };

      // 添加新节点
      const addNewAgentNode = () => {
        // 创建并添加新节点到项目
        const newNode = { id: 'agent_' + Date.now(), name: 'New Agent Node', details: 'Some details' };
        selectedNode.value = newNode;
      };

      const addNewToolNode = () => {
        const newNode = { id: 'tool_' + Date.now(), name: 'New Tool Node', details: 'Some details' };
        selectedNode.value = newNode;
      };

      const addNewDataNode = () => {
        const newNode = { id: 'data_' + Date.now(), name: 'New Data Node', details: 'Some details' };
        selectedNode.value = newNode;
      };

      const {post, postWithCallback} = useServer();
      const userStore = useUserStore();
      const deployButtonState = ref({deployText:"部署", disable:false});
      const deployAction = () => {
        if (deployButtonState.value.disable==true) return;
        post('createWS', {userID:userStore.currentUser, currentProject:currentProject.value.id, content:currentProject.value.content})
        deployButtonState.value.disable = false;
        setTimeout(()=>{checkDeployed()},2000);
      };
      const checkDeployed=()=>{
        deployButtonState.value.disable = false;
        postWithCallback('checkProjectRunning',{userID:userStore.currentUser, projectID:currentProject.value.id}, (response:any)=>{
          console.log(response)
          if (response.running){
            deployButtonState.value.disable = false;
            deployButtonState.value.deployText = "重新部署";
          }else{
            deployButtonState.value.disable = false;
            deployButtonState.value.deployText = "部署";
          }
        })
      }
      onMounted(() => {
        checkDeployed();
      });

      // 初始加载时，设置当前项目内容
      onMounted(() => {
        const project = projectsStore.projects.find(p => p.id === props.projectId);
        if (project) {
          currentProject.value = project;
        }
      });

      const InitialData = computed(() => {
        return currentProject.value.content;
      });
      return {
        currentProject,
        updateProjectName,
        selectedNode,
        isInspectorVisible,
        saveProject,
        refreshProject,
        addNewAgentNode,
        addNewToolNode,
        addNewDataNode,
        deployAction,
        InitialData,
        componentKey,
        deployButtonState,
      };
    },
  });
  </script>
  
  <style scoped>
  
  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .project-name-input {
    font-size: 18px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%;
  }
  
  .project-content {
    margin-top: 10px;
  }
  
  textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 16px;
    line-height: 1.5;
  }


  .project {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.content {
  display: flex;
  width: 100%;
  height: 100%;
}

.inspector {
  width: 250px;
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 10px;
  
}

.editor {
  flex: 1;
}

textarea {
  width: 100%;
  height: 300px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 200px;
}
.menu-bar {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  padding: 5px;
  border-bottom: 2px solid #ddd;
  gap: 10px; /* 让元素之间有一定间距 */
}

/* 左侧按钮组 */
.left-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 右侧特殊按钮 */
.deploy-button {
  margin-left: auto;  /* 让它推送到最右边 */
  background-color: #ff6b6b;
  color: white;
  padding: 8px 30px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.deploy-button:hover {
  background-color: #ff4f4f;
}

/* 通用按钮样式 */
button {
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
.deploy-button[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}
  </style>
  